<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在类中使用访问器</title>
</head>
<body>
    
</body>
<script>
    /*
        访问器在很多语言里面都是有涉及到的  它可以让我们代码更加的优雅 以属性的形式来访问方法
    */
    
    // 不使用访问器
    class website{
        constructor(host){
            this.data = {
                host
            }
        }
        adit(url){
            this.data.host = url
        }
        show(){
            return this.data.host
        }
    }
    let hd = new website('http://www.baidu.com')
    console.log(hd)
    console.log(hd.show())
    hd.adit('vue.js.cn')
    console.log(hd)
    // 这样写虽然逻辑是通顺的 但是一会儿方法一会儿属性  不是很优雅  所以我们可以使用访问器来写

    class site{
        constructor(host){
            this.data = {}
            this.host = host
        }
        set host(url){
            if(/^https?:\/\/?/i.test(url)){
                this.data.host = url
            }else{
                throw new Error('格式错误')
            }
        }
        get host(){
            return this.data.host
        }
    }
    let jimmy = new site('http://jimmy.com')
    console.log(jimmy)
    // jimmy.host = 'baidu.com'  // 报错 格式错误
    console.log('get'+jimmy.host)
    jimmy.host = 'https://www.lol.com'
    console.log(jimmy.host)  //  http://www.lol.com

    //   使用了访问器以后 可以让代码的结构更加的清晰   访问器无非就是get 和 set访问器

    /*
        复习正则  
            ?代码一个或0个  常用于可有可无的时候 例如网站的域名 http或者https  这时候我们正则可以写 https?  代表的就是这个s可有可无
    */
</script>
</html>